<template>
    <div>
    <div class="s-title">
        <img src="../assets/imgs/bjleft.png">
        <span class="font32">阳光食堂</span>
        <img src="../assets/imgs/bjright.png">
    </div>
    <div class="s-main">
        <div class="liudong">
            <liquid></liquid>
        </div>
        <leftscrooll2 v-if="county" :countycher=county></leftscrooll2>
        <leftscrooll1 v-else></leftscrooll1>
    </div>
    </div>
</template>
<script>
    import liquid from './liquid.vue';
    import leftscrooll1 from './leftscrooll1.vue';
    import leftscrooll2 from './leftscrooll2.vue';


import BScroll from '@better-scroll/core'
// import Slide from '@better-scroll/slide'
// BScroll.use(Slide)
export default {
    data() {
        return {
            
        }
    },
    props: {
        active: {
          type: Number,
          default: 2
        },
        county:{
            type: String,
            default: null
        }
    },
    components: {
        "liquid": liquid,
        "leftscrooll1":leftscrooll1,
        "leftscrooll2":leftscrooll2
    },
    mounted() {
        
    },

    methods: {
    }
}
</script>
<style scoped>
.s-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 11px 0 28px 0;
}

.s-title img {
    width: 100px;
    height: 3px;
}

.s-title span {
    font-size: 32px;
    font-weight: 600;
    color: #FFF;
    margin: 0 15px;
}

.s-main {
    width: 100%;
    height: 580px;
    background: rgba(0, 0, 0, 0.5);
    border: 3px solid;
    border-image: linear-gradient(270deg, rgba(0, 252, 255, 0.1), rgba(0, 252, 255, 1), rgba(0, 252, 255, 0.1)) 3 3;
}

</style>